<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="短剧名称">
          <template slot="content">
            <selectPlaylet
              type="playlet"
              :is-resize="isResize"
              :reserve="false"
              :multiple="true"
              :autoreset="true"
              @result="playletSelect"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="短剧属性">
          <template slot="content">
            <el-select
              v-model="formData.property_type"
              clearable
            >
              <el-option
                v-for="item in propertyTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="短剧类型">
          <template slot="content">
            <el-select
              v-model="formData.category"
              clearable
            >
              <el-option
                v-for="item in categoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="审核类型">
          <template slot="content">
            <el-select
              v-model="formData.type"
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="制作方">
          <template slot="content">
            <selectPlaylet
              type="producer"
              :reserve="false"
              :autoreset="true"
              :is-resize="isResize"
              :multiple="true"
              @result="producerResult"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="版权方">
          <template slot="content">
            <selectPlaylet
              type="copyright"
              :autoreset="true"
              :reserve="false"
              :is-resize="isResize"
              :multiple="true"
              @result="copyrightResult"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="编剧方">
          <template slot="content">
            <selectPlaylet
              type="scriptwriter"
              :reserve="false"
              :autoreset="true"
              :is-resize="isResize"
              :multiple="true"
              @result="scriptwriterResult"
            />
          </template>
        </BiFormItem>
        <div class="search-item ">
          <el-select
            v-model="playletTypeValue"
            class="select-label"
            style="width:110px;"
            @change="playletTypeChange"
          >
            <el-option
              v-for="(item) in playletTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            > </el-option>
          </el-select>
          <div class="item-content selectContent">
            <p
              v-if="playletTypeValue=='mainPlaylet'"
              style="width:100%;"
            >
              <selectPlaylet
                :type="playletTypeValue"
                :is-resize="mainPlayletResize"
                :reserve="false"
                :multiple="true"
                :autoreset="true"
                @result="playletResult"
              />
            </p>
            <div
              v-else-if="playletTypeValue=='versionPlaylet'"
              style="width:100%;"
            >
              <selectPlaylet
                :type="playletTypeValue"
                :is-resize="mainPlayletResize"
                :reserve="false"
                :multiple="true"
                :autoreset="true"
                @result="playletResult"
              />
            </div>
          </div>
        </div>
        <BiFormItem label="标签">
          <template slot="content">
            <selectPlaylet
              type="tag"
              :is-resize="isResize || tagResize"
              :multiple="true"
              :reserve="false"
              @result="tagsSelect"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="推荐剧">
          <template slot="content">
            <el-select
              v-model="formData.is_recommend"
              clearable
            >
              <el-option
                v-for="item in recommendList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="分销方">
          <template slot="content">
            <el-select
              v-model="formData.distributor_ids"
              filterable
              remote
              multiple
              collapse-tags
              placeholder="请选择分销方"
              clearable
            >
              <el-option
                v-for="item in distributor_ids"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left">

        </div>
        <div class="right rowFlex">
          <el-button
            v-permission:content-distributor
            @click="batchdistributor = true"
          >批量配置分销方</el-button>
          <el-button
            style="margin-right:10px;"
            @click="addTags()"
          >标签管理</el-button>
          <el-tooltip
            v-if="checkedList.length==0"
            trigger="hover"
            style="margin-right:10px;"
            class="item"
            effect="dark"
            content="请选择要批量上架的短剧"
            placement="top"
          >
            <div>
              <el-button
                :disabled="checkedList.length==0"
                @click="createMini"
              >批量上架</el-button>
            </div>
          </el-tooltip>
          <!-- <el-tooltip v-if="checkedList.length==0" class="item" effect="dark" content="请选择要同步的剧" placement="top">
            <el-button :disabled="true" @click="createMini">同步到小程序</el-button>
          </el-tooltip> -->
          <el-button
            v-else
            style="margin-right:10px;"
            @click="createMini"
          >批量上架</el-button>
          <el-button
            v-permission:content-add
            style="margin-right:10px;"
            type="primary"
            @click="add()"
          >新增合同剧</el-button>
          <svg-icon
            icon-class="record"
            class="recordIcon"
            @click="requestRecord"
          />
        </div>
      </div>
    </Block>
    <div
      v-permission:content-index
      class="table-table"
    >
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @selection-change="handleSelectionChange"
        @pagination="handlePageChange"
      >
        <!--
          关联剧暂时隐藏
          <template v-slot:related_playlet="{ row }">
          <div v-if="row.relation_playlet.length<=1" class="rowFlex columnCenter">
            <div v-for="item in row.relation_playlet" :key="item.userid" class="   userInfoStyle">
              <p class="textHidden rowFlex columnCenter userAlias" style="width:180px;"> {{ item.title }} </p>
              <p class="textHidden rowFlex columnCenter userAlias" style="color:#666666;margin-left:10px;">ID:{{ item.id }}</p>
            </div>
          </div>
          <el-popover
            v-else
            placement="right"
            trigger="click"
          >
            <div v-for="item in row.relation_playlet" :key="item.userid" style="margin-bottom:10px;">
              <p class="textHidden rowFlex columnCenter userAlias"> {{ item.title }} </p>
              <p class="textHidden rowFlex columnCenter userAlias" style="color:#666666;margin-left:10px;">ID:{{ item.id }}</p>
            </div>

            <div slot="reference" style="font-size:14px;">
              <div>
                <p style="color:#606266;font-weight:400;word-break: break-all;">{{ row.relation_playlet[0].title }}</p>
                <p style="color:#606266;font-weight:400;word-break: break-all;">ID:{{ row.relation_playlet[0].id }}</p>
              </div>
              <el-button type="text"> +{{ row.relation_playlet.length-1 }}</el-button>
            </div>
          </el-popover>
        </template> -->
        <template v-slot:status="{ row }">
          <div class="colorStatus">
            <span class="success">已支付</span>
          </div>
        </template>
        <template v-slot:tags="{ row }">
          <p
            v-for="(item,index) in row.tags"
            :key="index"
          >{{ item.tag_title }}</p>
        </template>
        <template v-slot:main_playlet="{ row }">
          <p> {{ row.main_playlet.title }}</p>
          <p
            v-if="row.main_playlet.id "
            class="infoText"
          >{{ row.main_playlet.id }}</p>
        </template>
        <template v-slot:version_playlet="{ row }">
          <p>{{ row.version_playlet.title }}</p>
          <p class="infoText">{{ row.version_playlet.id }}</p>
        </template>
        <template v-slot:is_recommend="{ row }">
          <el-switch
            v-model="row.is_recommend"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            @change="onRecommendChange(row,row.is_recommend)"
          >
          </el-switch>
        </template>
        <template v-slot:title="{ row }">
          <p
            style="color:#06C261;cursor: pointer;"
            @click="showDetails(row)"
          >{{ row.title }}</p>
          <p
            v-if="row.id"
            class="text"
          >ID:{{ row.id }}</p>
          <p class="text textColor">简介:{{ row.introduce }}</p>
        </template>
        <template v-slot:zip="{ row }">
          <div class="channelBtn">
            <el-button
              v-permission:content-edit
              type="text"
              size="medium"
              @click="edit(row)"
            >编辑</el-button>
            <el-button
              v-permission:content-add
              type="text"
              size="medium"
              @click="uploadVideo(row)"
            >上传短剧</el-button>
            <el-button
              v-permission:content-edit
              type="text"
              size="medium"
              @click="watchDetails(row)"
            >批量上下架</el-button>
          </div>
          <div class="rowFlex channelBtn">
            <el-button
              type="text"
              size="medium"
              @click="nextVideo(row)"
            >下部推荐</el-button>
            <el-dropdown>
              <el-button
                style="margin-left:10px;"
                type="text"
                size="medium"
              >更多 <i class="el-icon-arrow-down"></i></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    v-if="row.property_type==1"
                    type="text"
                    size="medium"
                    @click="addNewPlaylet(row,'version')"
                  >创建版本剧</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="row.property_type==2"
                    type="text"
                    size="medium"
                    @click="addNewVersion(row,'waistcoat')"
                  >创建马甲剧</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-if="(row.property_type==1 || row.property_type==2) && row.check_status==2"
                    v-permission:examine-video
                    type="text"
                    size="medium"
                    @click="setVideoUrl(row)"
                  >过审播放链接</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-permission:content-del
                    type="text"
                    size="medium"
                    @click="delConfirm(row)"
                  >删除</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-permission:content-distributor
                    type="text"
                    size="medium"
                    @click="onSetdistributor(row)"
                  >配置分销方</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    v-permission:content-log
                    type="text"
                    size="medium"
                    @click="onOpenLog(row)"
                  >日志</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </BiTable>
    </div>
    <BiDrawer
      v-model="addTheater"
      :drawer-title="drawerTitle"
      :row-info="rowInfo"
      :is-upload="isUpload"
      :component="drawerComponent.addTheater"
      drawer-size="950"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="showRow"
      drawer-title="短剧详情"
      :data="rowInfo"
      :component="drawerComponent.rowDetails"
      drawer-size="400"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="showSoldOut"
      :row-info="rowInfo"
      drawer-title="批量上下架短剧"
      :component="drawerComponent.soldOut"
      drawer-size="400"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="showEqualApp"
      :checked-list="checkedList.toString()"
      :checked-list-data="checkedListData"
      drawer-title="内容同步"
      :component="drawerComponent.equalApp"
      drawer-size="400"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="showRecord"
      drawer-title="短剧同步记录"
      :row-info="rowInfo"
      :component="drawerComponent.syncRecord"
      drawer-size="400"
      @ok="onSubmit"
    ></BiDrawer>
    <setVideoUrl
      v-if="showVideoUrl"
      :show.sync="showVideoUrl"
      :row-info="rowInfo"
      @ok="clickSearch"
    />
    <!-- 新增标签 -->
    <BiDrawer
      v-model="showAddTags"
      drawer-title="标签管理"
      :component="drawerComponent.handleTags"
      drawer-size="400"
      @ok="tagSubmit"
    ></BiDrawer>
    <!-- 下一步剧 -->
    <nextVideo
      :show.sync="setNextVideo"
      :info="rowInfo"
      @ok="clickSearch"
    />
    <BiLog
      :value="logShow"
      size="50%"
      :log-id="Logid"
      :model="'playlet'"
      @onclose="oncloseLog"
    ></BiLog>
    <Setdistributor
      v-if="setdistributorDialog.isShow"
      :row-info="setdistributorDialog.row"
      @coles="onSetdistributorColes"
      @ok="onSetdistributorOk"
    ></Setdistributor>
    <BatchSetdistributor
      v-if="batchdistributor"
      @coles="() => {batchdistributor = false}"
      @ok="onBatchdistributorOk"
    ></BatchSetdistributor>

  </div>
</template>

<script>
import BiDrawer from '@/components/BiDrawer'
import BiLog from '@/components/BiLog'
import setVideoUrl from './component/changeVIdeoUrl.vue'
import { contentIndex, delPlaylet, detail, sysPlayletRecommendSwitch } from '@/api/content'
import addTheater from './component/addTheater'
import rowDetails from './component/rowDetails.vue'
import soldOut from './component/soldOut.vue'
import equalApp from './component/equalApp.vue'
import syncRecord from './component/syncRecord.vue'
import { mapMutations, mapState, mapActions } from 'vuex'
import changeVIdeoUrl from './component/changeVIdeoUrl.vue'
import nextVideo from './component/step/nextVideo.vue'
import handleTags from './component/handleTags.vue'
import { commonData } from '@/api/common'
import Setdistributor from './component/setdistributor.vue'
import BatchSetdistributor from './component/batchSetdistributor.vue'
export default {
  name: 'AutoReplay',
  components: {
    BiDrawer,
    setVideoUrl,
    nextVideo,
    Setdistributor,
    BatchSetdistributor,
    BiLog
  },
  computed: {
    ...mapState('content', ['isResizeList']),
    ...mapState('common', ['categoryList', 'propertyTypeList'])
  },
  data() {
    return {
      formData: {
        playlet_id: '',
        property_type: '',
        type: '',
        category: '',
        is_recommend: '',
        distributor_ids: [],
        producer_ids: [],
        copyright_ids: [],
        scriptwriter_ids: [],
        main_playlet_ids: [],
        tag_id: [],
        contract_playlet_ids: []
      },
      setNextVideo: false,
      playletTypeValue: 'mainPlaylet',
      isResize: false,
      mainPlayletResize: false,
      tagResize: false,
      addTheater: false,
      showVideoUrl: false,
      loading: false,
      rowInfo: {},
      logShow: false,
      Logid: '',
      checkedList: [],
      checkedListData: [],
      distributor_ids: [],
      playletTypeList: [
        { label: '归属合同', value: 'mainPlaylet' },
        { label: '归属版本剧', value: 'versionPlaylet' }
      ],
      typeList: [
        { label: '全部', value: '' },
        { label: '非审核剧', value: 1 },
        { label: '审核剧', value: 2 }
      ],
      optionList: [
        { label: '全部类型', value: '' },
        { label: '非审核剧', value: '1' },
        { label: '审核剧', value: '2' }
      ],
      recommendList: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      showRow: false,
      showEqualApp: false,
      showRecord: false,
      isUpload: false, // 直接去上传
      showAddTags: false, // 标签管理
      setdistributorDialog: {
        row: {},
        isShow: false
      },
      batchdistributor: false,
      drawerTitle: '新增短剧',
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      showSoldOut: false,
      drawerComponent: {
        addTheater: addTheater,
        rowDetails: rowDetails,
        soldOut: soldOut,
        equalApp: equalApp,
        changeVIdeoUrl: changeVIdeoUrl,
        syncRecord: syncRecord,
        handleTags: handleTags
      },
      tableData: [],
      tableColums: [
        { label: '选择', prop: 'selection', type: 'selection' },
        {
          label: '封面',
          prop: 'cover',
          width: 80,
          render: (h, { row }) => {
            return <el-image src={row.cover} style='width:50px;border-radius:5px;'></el-image>
          }
        },
        {
          label: '短剧名称',
          prop: 'title',
          width: 240,
          slotScope: true
        },
        {
          label: '集数',
          prop: 'upload_num',
          width: 100
        },
        {
          label: '短剧属性',
          prop: 'property_type',
          width: 130,
          renderHeader: (h, { row }) => {
            return (
              <div>
                短剧属性
                <el-tooltip class='item' effect='dark' placement='top'>
                  <div slot='content' class='tooltipLine'>
                    <p>合同剧：短剧底层，任意短剧都会归属为某部合同剧，可过审</p>
                    <p>版本剧：只能由合同剧新建，一个合同剧可以创建若干版本剧，可修改短剧内容，可过审</p>
                    <p>马甲剧：只能由版本剧新建，只能修改名称、封面，不可修改短剧内容，引用对应版本剧内容及过审信息</p>
                  </div>
                  <i class='el-icon-question' style='margin-left:5px;'></i>
                </el-tooltip>
              </div>
            )
          },
          render: (h, { row }) => {
            if (row.property_type == 1) {
              return <span>合同剧</span>
            } else if (row.property_type == 2) {
              return <span>版本剧</span>
            } else if (row.property_type == 3) {
              return <span>马甲剧</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '归属合同',
          prop: 'main_playlet',
          width: 120,
          slotScope: true
        },
        {
          label: '归属版本剧',
          prop: 'version_playlet',
          width: 120,
          slotScope: true
        },
        // {
        //   label: '关联剧',
        //   prop: 'related_playlet',
        //   width: 180,
        //   slotScope: true,
        //   renderHeader: (h, { row }) => {
        //     return (
        //       <div>
        //         关联剧
        //         <el-tooltip class='item' effect='dark' placement='top'>
        //           <div slot='content'>
        //             <p>如果是合同剧显示关联的版本剧，如果是版本剧显示关联的合同剧</p>
        //           </div>
        //           <i class='el-icon-question' style='margin-left:5px;'></i>
        //         </el-tooltip>
        //       </div>
        //     )
        //   }
        // },
        {
          label: '短剧类型',
          prop: 'category',
          width: 100,
          render: (h, { row }) => {
            const playlet = this.categoryList.find((item) => item.value == row.category)
            if (playlet) {
              return <span>{playlet.label}</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '标签',
          prop: 'tags',
          slotScope: true
        },
        {
          label: '制作方',
          prop: 'producer_name'
        },
        {
          label: '版权方',
          prop: 'copyright_name'
        },
        {
          label: '编剧方',
          prop: 'scriptwriter_name'
        },
        {
          label: '已分配分销方',
          minWidth: 120,
          prop: 'distributors',
          render: (h, { row }) => {
            return (
              <el-popover placement='top-start' width='200' trigger='hover'>
                <div>
                  {row.distributors.map((item, index) => {
                    return (
                      <span>
                        {index !== 0 ? '、' : ''}
                        {item.name}
                      </span>
                    )
                  })}
                </div>
                <div class='distributors_list' slot='reference'>
                  {row.distributors.map((item, index) => {
                    return (
                      <span>
                        {index !== 0 ? '、' : ''}
                        {item.name}
                      </span>
                    )
                  })}
                </div>
              </el-popover>
            )
          }
        },
        {
          label: '是否为推荐剧',
          prop: 'is_recommend',
          slotScope: true
        },
        {
          label: '剧本上线时间',
          prop: 'online_time',
          render: (h, { row }) => {
            if (row.category == 5) {
              return <span>{row.online_time}</span>
            } else {
              return <span></span>
            }
          },
          width: 160
        },
        {
          label: '审核类型',
          prop: 'type',
          render: (h, { row }) => {
            if (row.type == 1) {
              return <span>非审核剧</span>
            } else if (row.type == 2) {
              return <span>审核剧</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '微信审核状态',
          prop: 'check_status',
          width: 130,
          renderHeader: (h, { row }) => {
            return (
              <div>
                微信审核状态
                <el-tooltip class='item' effect='dark' placement='top'>
                  <div slot='content'>
                    <p>合同剧、版本剧需要提审，如一部合同剧或版本剧在多个小程序提审，只要在1个小程序中审核通过，就记为审核通过</p>
                  </div>
                  <i class='el-icon-question' style='margin-left:5px;'></i>
                </el-tooltip>
              </div>
            )
          },
          render: (h, { row }) => {
            if (row.check_status == 0) {
              return <span>-</span>
            } else if (row.check_status == 1) {
              return <span>未通过</span>
            } else if (row.check_status == 2) {
              return <span>已通过</span>
            } else {
              return <span>-</span>
            }
          }
        },
        {
          label: '抖音审核状态',
          prop: 'dy_check_staus',
          width: 130,
          renderHeader: (h, { row }) => {
            return (
              <div>
                抖音审核状态
                <el-tooltip class='item' effect='dark' placement='top'>
                  <div slot='content'>
                    <p>合同剧、版本剧需要提审，如一部合同剧或版本剧在多个小程序提审，只要在1个小程序中审核通过，就记为审核通过</p>
                  </div>
                  <i class='el-icon-question' style='margin-left:5px;'></i>
                </el-tooltip>
              </div>
            )
          },
          render: (h, { row }) => {
            if (row.dy_check_staus == 0) {
              return <span>-</span>
            } else if (row.dy_check_staus == 1) {
              return <span>未通过</span>
            } else if (row.dy_check_staus == 2) {
              return <span>已通过</span>
            } else {
              return <span>-</span>
            }
          }
        },
        {
          label: '完结状态',
          prop: 'upload_num',
          render: (h, { row }) => {
            if (row.status == 1) {
              return (
                <p class='colorStatus'>
                  <span class='indeter'>更新中</span>
                </p>
              )
            } else if (row.status == 2) {
              return (
                <p class='colorStatus'>
                  <span class='success'>已完结</span>
                </p>
              )
            } else {
              return <span></span>
            }
          }
        },

        {
          label: '操作',
          prop: 'zip',
          width: 260,
          fixed: 'right',
          slotScope: true
        }
      ]
    }
  },
  watch: {
    isResizeList(newVal, oldVal) {
      if (newVal) {
        this.clickSearch()
      }
    },
    addTheater(newVal, oldVal) {
      if (newVal) {
        document.querySelector('body').setAttribute('style', 'overflow:hidden;')
      } else {
        document.body.removeAttribute('style')
      }
    }
  },
  mounted() {
    const query = this.$route.query
    if (query.type === 'setActor') {
      this.edit({ id: query.id })
    }
    this.onGetDistributor()
    this.clickSearch()
    this.reqeustCategoryList()
    this.$AccessReport.report('zhangyu-content', [this.$store.state.user.routerItem.name, '内容管理', '内容管理'])
  },
  methods: {
    ...mapMutations('content', ['set_handleType']),
    ...mapActions('common', ['reqeustCategoryList']),
    onBatchdistributorOk() {
      this.batchdistributor = false
      this.clickSearch()
    },
    onSetdistributor(row) {
      this.setdistributorDialog = {
        isShow: true,
        row
      }
    },
    onSetdistributorColes() {
      this.setdistributorDialog = {
        isShow: false,
        row: {}
      }
    },
    onSetdistributorOk() {
      this.clickSearch()
      this.setdistributorDialog = {
        isShow: false,
        row: {}
      }
    },
    async onGetDistributor() {
      const res = await commonData({ type: 'distributor' })
      if (res.status_code === 1) {
        this.distributor_ids = res.data.data
      }
    },
    oncloseLog(value) {
      console.log(value)
      this.logShow = value
    },
    onOpenLog(row) {
      this.Logid = row.id
      this.logShow = true
    },
    async onRecommendChange(row, value) {
      const res = await sysPlayletRecommendSwitch({ id: row.id, status: value })
    },
    clickSearch() {
      this.loading = true
      contentIndex({ ...this.formData, ...this.page_info }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
        }
      })
    },
    // 下一步剧推荐
    nextVideo(row) {
      this.setNextVideo = true
      this.rowInfo = row
    },
    playletSelect(value) {
      this.formData.playlet_id = value
    },
    producerResult(value) {
      this.formData.producer_ids = value
    },
    copyrightResult(value) {
      this.formData.copyright_ids = value
    },
    scriptwriterResult(value) {
      this.formData.scriptwriter_ids = value
    },
    playletResult(value) {
      if (this.playletTypeValue === 'mainPlaylet') {
        this.formData.main_playlet_ids = value
      } else {
        this.formData.contract_playlet_ids = value
      }
    },
    tagsSelect(value) {
      this.formData.tag_id = value
    },
    playletTypeChange() {
      this.formData.main_playlet_ids = []
      this.formData.contract_playlet_ids = []
      this.mainPlayletResize = true
      setTimeout(() => {
        this.mainPlayletResize = false
      }, 200)
    },
    addTags() {
      this.showAddTags = true
    },
    requestRecord() {
      this.showRecord = true
    },
    handleSelectionChange(val) {
      if (val && val.length > 0) {
        const list = val.map((item) => {
          return item.id
        })
        this.checkedList = list
        this.checkedListData = val
      } else {
        this.checkedList = []
        this.checkedListData = true
      }
    },
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    resizeList() {
      console.log(111)
    },
    reset() {
      this.$set(this, 'formData', {
        playlet_id: '',
        property_type: '',
        type: '',
        category: '',
        producer_ids: [],
        copyright_ids: [],
        scriptwriter_ids: [],
        main_playlet_ids: [],
        tag_id: [],
        contract_playlet_ids: []
      })
      this.isResize = true
      this.mainPlayletResize = true
      setTimeout(() => {
        this.isResize = false
        this.mainPlayletResize = false
      }, 200)
      this.playletTypeValue = 'mainPlaylet'
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    // 同步到小程序
    createMini() {
      this.showEqualApp = true
    },
    // 下架
    soldOut() {
      this.showSoldOut = true
    },
    add(title) {
      this.drawerTitle = '新增合同剧'
      this.addTheater = true
      this.isUpload = false
      this.rowInfo = {}
      this.rowInfo = {
        isCreatePlaylet: true,
        number_type: 1,
        property_type: 1,
        category: 1,
        status: 1,
        gender_type: 1,
        type: 1,
        playlet_category: {},
        actor: []
      }
      this.$router.push(`${this.$route.path}`)
    },
    addNewPlaylet(row) {
      this.drawerTitle = '新增版本剧'
      detail({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          const detailsInfo = res.data
          detailsInfo.id = row.id
          this.rowInfo = detailsInfo
          this.rowInfo.contract_id = this.rowInfo.id || ''
          this.rowInfo.property_type = 2
          this.rowInfo.isCreatePlaylet = true // 新增
          this.addTheater = true
          this.isUpload = false
        }
      })
    },
    addNewVersion(row) {
      this.drawerTitle = '新增马甲剧'
      detail({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          const detailsInfo = res.data
          detailsInfo.id = row.id
          this.rowInfo = detailsInfo
          this.rowInfo.contract_id = this.rowInfo.id || ''
          this.rowInfo.property_type = 3
          this.rowInfo.isCreatePlaylet = true // 新增
          this.addTheater = true
          this.isUpload = false
        }
      })
    },
    edit(row) {
      this.drawerTitle = '编辑短剧'
      detail({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          const detailsInfo = res.data
          detailsInfo.id = row.id
          this.rowInfo = detailsInfo
          this.rowInfo.isCreatePlaylet = false // 编辑
          this.rowInfo.contract_id = this.rowInfo.contract_playlet_id || ''
          this.rowInfo.check_status = row.check_status
          this.addTheater = true
          this.isUpload = false
        }
      })
    },
    uploadVideo(row) {
      this.drawerTitle = '编辑短剧'
      detail({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          const detailsInfo = res.data
          detailsInfo.id = row.id
          this.rowInfo = detailsInfo
          this.addTheater = true
        }
      })
      this.isUpload = true
    },
    setVideoUrl(row) {
      this.rowInfo = row
      this.showVideoUrl = true
    },
    // 一键下架
    watchDetails(row) {
      this.rowInfo = row
      this.showSoldOut = true
    },
    showDetails(row) {
      detail({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          const detailsInfo = res.data
          detailsInfo.id = row.id
          this.rowInfo.actor = row.actor
          this.rowInfo = detailsInfo
          this.showRow = true
        }
      })
    },
    delConfirm(row) {
      this.$confirm('确定要删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.delRow(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    delRow(row) {
      delPlaylet({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            this.clickSearch()
          }, 200)
        }
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    tagSubmit() {
      this.tagResize = true
      this.formData.tag_id = []
      setTimeout(() => {
        this.tagResize = false
        this.clickSearch()
      }, 100)
    },
    onSubmit(data) {},
    submitNextVideo(data) {
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .distributors_list {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*显示两行*/
}
.table-table {
  width: 100%;
  background: #fff;
  padding: 0 20px;
  .el-button {
    margin-left: 10px;
    margin-right: 0;
  }
}
.channelBtn {
  height: 25px;
}

.action-box {
  margin-bottom: 0 !important;
}
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }

  .userImage {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}
.recordIcon {
  font-size: 24px;
  margin-left: 10px;
  cursor: pointer;
  position: relative;
  top: 5px;
}
.textColor {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*显示两行*/
}
</style>
